Cards 卡片

卡片是一個展示單個主題資訊的介面元件:

Elevated card 浮起卡片

浮起卡片透過投影提供層次感,使其在背景上更突出。

Elevated card color 浮起卡片顏色

Elevated card states  浮起卡片狀態

不同的狀態用於傳達元件的互動反饋。示例展示了浮起卡片在不同互動狀態下的樣式,包括:

1 懸停(Hovered)2 聚焦(Focused)3 按下(Pressed)4 拖動(Dragged)5 禁用(Disabled)

填充卡片 Filled card

填充卡片有著純色背景,主要用來突出顯示重要內容。

填充卡片狀態(Filled card states)

1 懸停(Hovered)2 聚焦(Focused)3 按下(Pressed)4 拖動(Dragged)5 禁用(Disabled)

Outlined card 描邊卡片

描邊卡片只有一個簡單的邊框,沒有背景顏色。這種設計讓頁面看起來更加輕巧,主要用來顯示次要內容或補充資訊。

1 容器(Container)——卡片的主要結構部分。2 邊框(Outline)——用於區分卡片的描邊元素。

Outlined card states 描邊卡片狀態

1 懸停(Hovered)2 聚焦(Focused)3 按下(Pressed)4 拖動(Dragged)5 禁用(Disabled)
屬性(Attribute)值(Value)
形狀(Shape)12dp 圓角半徑
左/右邊距(Left/right padding)16dp
卡片間距(Padding between cards)最大 8dp
文字對齊方式(Label text alignment)左對齊(Start-aligned)